<template>
  <div class="bargain views-container">
    <div class="wlm-table">
      <div
        class="wlm-table-header"
        style="margin-bottom:20px;"
      >
        <div class="dashboard-header">
          <el-row :gutter="8">
            <el-col :span="8">
              <div class="dashboard-header-item flex-col flex-justify-c flex-align-c">
                <div class="item-title">最大任务量</div>
                <div
                  class="item-num"
                  style="cursor:pointer;"
                >
                  <div
                    style="color:#409EFF"
                    @click="classbtn"
                  >{{tableFormatData.systemlog.otherData.all_task_num}}</div>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="dashboard-header-item flex-col flex-justify-c flex-align-c">
                <div class="item-title">当前执行任务量
                  <el-button
                    type="text"
                    @click="clickpop(btn)"
                  >查看任务</el-button>
                </div>

                <div class="item-num">
                  <span>{{tableFormatData.systemlog.otherData.now_task_num}}</span>
                </div>
              </div>

            </el-col>
            <el-col :span="8">
              <div class="dashboard-header-item flex-col flex-justify-c flex-align-c ">
                <div class="item-title">可用任务量</div>
                <div class="item-num">
                  <span>{{tableFormatData.systemlog.otherData.can_task_num}}</span>
                </div>
              </div>
            </el-col>
          </el-row>
        </div>
      </div>
      <div class="wlm-table-header">
        <!-- -->

        <el-form
          :model="tableFormatData.systemlog.files"
          size="small"
          label-width="85px"
          class="retail-form"
          label-position="right"
        >
          <el-form-item
            label=""
            class="filter"
          >
            <el-form-item label="日志内容：">
              <el-input
                @keyup.enter.native="filesSerch"
                v-model="tableFormatData.systemlog.files.log_content"
                placeholder="请输入日志内容"
                style="width:160px;"
              ></el-input>
            </el-form-item>
            <el-form-item label="日志时间：">
              <el-date-picker
                style="width:360px;margin-right:0;"
                v-model="tableFormatData.systemlog.files.time"
                :picker-options="pickerOptions"
                value-format="timestamp"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              >
              </el-date-picker>
            </el-form-item>

          </el-form-item>
          <el-form-item
            label=""
            class="filter-btns"
          >
            <el-button
              type="primary"
              @click="filesSerch"
            >筛选</el-button>
            <el-button
              type="text"
              @click="filesEmpty"
            >清空筛选条件</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="wlm-table-content">
        <el-table
          :ref="tableFormatData.systemlog.key"
          :data="tableFormatData.systemlog.tableData"
          @selection-change="handleSelectionChange"
          style="width: 100%"
        >
          <el-table-column
            prop="date"
            label="ID"
            min-width="40"
          >
            <template slot-scope="scope">
              <span>{{scope.row.log_id}}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="日志内容"
            min-width="100"
          >
            <template slot-scope="scope">
              <p>{{scope.row.log_content}}</p>
            </template>
          </el-table-column>
          <el-table-column
            prop="date"
            label="操作时间"
            min-width="50"
          >
            <template slot-scope="scope">
              <p>{{scope.row.create_time}}</p>
            </template>
          </el-table-column>

        </el-table>
        <div class="pagination-content flex-row flex-justify-e flex-align-c">
          <el-pagination
            :disabled="!hasTableData"
            @size-change="listPageChange"
            @current-change="listPageChange"
            :current-page.sync="tableFormatData.systemlog.pagination.page"
            :page-sizes="tableFormatData.systemlog.pagination.pagesizes"
            :page-size.sync="tableFormatData.systemlog.pagination.list_rows"
            layout="total, sizes, prev, pager, next, jumper"
            :total="hasTableData?tableFormatData.systemlog.pagination.total : 0"
          >
          </el-pagination>
        </div>
      </div>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="formFormatData.formData">
        <el-form-item
          label="最大任务数量"
          :label-width="formLabelWidth"
          style="width:500px;"
        >
          <el-input-number
            :controls="false"
            autocomplete="off"
            v-model="formFormatData.formData.asy_num"
            :min='5'
            :max="15"
          ></el-input-number>
          <div class="form-help">建议：根据自己的服务器实际承受情况来设置，较小服务器数量4-6个，较大服务器6-10个(内存：2G建议5个，4G建议7个，8G建议10个)</div>
        </el-form-item>

      </el-form>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="btnbutton"
        >确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="查看任务"
      :visible.sync="dialogVisible"
      @close="close"
      width="70%"
    >
      <el-table
        :data="tablebtn"
        :style="{'height':(tableFormatData.systemlog.otherData.all_task_num * 80)+'px'}"
      >
        <el-table-column label="任务">
          <template slot-scope="scope">
            {{scope.row.value}}
          </template>
        </el-table-column>
        <el-table-column label="标识">
          <template slot-scope="scope">
            {{scope.row.task}}
          </template>
        </el-table-column>

      </el-table>
      <div
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="danger"
          @click="close"
        >关闭</el-button>

      </div>
    </el-dialog>
  </div>
</template>
<script>
import {
  taskLogs,
  AsySave,
  AsyGet,
  haveInTask
} from '@/api/setting'
import mixins from '@/mixins/mixins'
export default {
  mixins: [mixins.getters('Table'), mixins.getters('Form')],
  name: 'Systemlog',
  data() {
    return {
      gridData: [],
      tableheight: '',
      btn: 0,
      tablebtn: [],
      dialogTableVisible: false,
      dialogFormVisible: false,
      dialogVisible: false,
      formLabelWidth: '120px',
      tableFormatData: {
        current: 'systemlog',
        systemlog: {
          key: 'systemlog',
          api: {
            getList: taskLogs
          },
          tableData: [],
          files: {
            ip: '',
            real_name: '',
            time: [],
            ids: [],
            checkall: '0',
            Recycle: '1'
          },
          otherData: {},
          pagination: {
            page: 1,
            list_rows: 50,
            pagesizes: [50, 100],
            total: 0
          }
        }
      },
      formFormatData: {
        key: 'userForm',
        model: {
          noCreateEdit: false,
          bindDialog: 'dialogTableVisible'
        },
        api: {
          editForm: {
            api: AsyGet,
            params: {}
            // filters: {
            //   img: {
            //     bindInit: ['chooseLogoConfig']
            //   }
            // },
            // redirect: 'category_id'
          }
          //   submitForm: goodsclassEdit
        },
        formData: {
          asy_num: ''
        },
        rules: {
        }
      }
    }
  },
  created() {
    this.tableData = '600px'
  },
  methods: {

    classbtn() {
      this.dialogFormVisible = true
    },
    btnbutton() {
      this.dialogFormVisible = false
      this.AsySavebtn()
    },
    AsySavebtn() {
      AsySave({ asy_num: this.formFormatData.formData.asy_num }).then(res => {
        const { data: { code, data, msg } } = res
        console.log(data)
        if (code === 1) {
          this.$message({
            type: 'success',
            message: '操作成功!'
          })
          this.filesSerch()
        } else {
          this.$message.error(msg)
        }
      })
    },
    getData() {
      let a = ''
      haveInTask().then(res => {
        this.btn = 1
        const { data: { code, data } } = res
        console.log('data', data)
        this.tablebtn = data
        if (code == 1) {
          a = setTimeout(res => {
            if (this.btn == 1) {
              this.getData()
            }
          }, 1500)
        } else {
          clearTimeout(a)
          this.btn = 0
        }
      })
    },
    clickpop() {
      this.dialogVisible = true
      console.log('this.btn', this.btn)
      if (this.dialogVisible == true) {
        this.getData()
      }
    },
    close() {
      this.btn = 0
      this.dialogVisible = false
    }

  }
}
</script>
<style lang="scss" scoped>
.form-help {
  color: #999;
  line-height: 14px;
  margin-top: 10px;
  font-size: 12px;
  font-weight: 400;
}
</style>
